<template>
  <div class="container">
      <h1>提交审核记录</h1>
          <p>任 务 i d ：
            <el-select v-model="formData.task" style="width: 240px">
              <el-option 
                v-for="i in tasklist" 
                :key="i.id" 
                :label="i.name" 
                :value="i.id">
              </el-option>
            </el-select>
          </p>
          <p> 用 户 i d ：
            <el-select v-model="formData.audit_user" style="width: 240px">
              <el-option 
                v-for="i in userlist" 
                :key="i.id" 
                :label="i.name" 
                :value="i.id">
              </el-option>
            </el-select>
          </p>
          <P>审核状态：
            <el-select v-model="formData.audit_status" style="width: 240px">
              <el-option value="1">已通过</el-option>
              <el-option value="2">未通过</el-option>
              <el-option value="3">审核中</el-option>
              <el-option value="4">已撤销</el-option>
          </el-select>
          </P>
          <el-button type="submit" @click="submitForm">提交</el-button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';

const router = useRouter();

const formData = ref({
  task: '',
  audit_user: '',
  audit_status: ''
});

const submitForm = async () => {
  http.post('/audit/', formData.value).then(res=>{
    if(res.data.code==201){
      ElMessage.success('审核成功')
      // router.push('/audit')
    }else{
      ElMessage.error('提交失败')
    }
  })
};

let userlist = ref([]);

const getUserList = () => {
    http.get('/adminuser/').then(res => {
      userlist.value = res.data;
      // console.log(userlist.value);
    })
}

let tasklist = ref([]);

const getTaskList = () => {
    http.get('/task/').then(res => {
      tasklist.value = res.data;
      // console.log(tasklist.value);
    })
}

onMounted(() => {
  getUserList();
  getTaskList();
});
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, select {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.response {
  margin-top: 20px;
  padding: 10px;
  border-radius: 4px;
}

.success {
  background-color: #dff0d8;
  color: #3c763d;
}

.error {
  background-color: #f2dede;
  color: #a94442;
}
</style>